<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频标签</title>
</head>
<style>
  * {margin: 0; padding: 0; box-sizing: border-box;}
  video {background-color: #aaa;}
  .btn {display: block; width: 10rem; height: 3rem; margin-bottom: 1rem; cursor: pointer;}
</style>
<body>
  <video id="myVideo" src="./assets/video/oceans.mp4" controls width="600" height="400"></video>

  <button class="btn" onclick="handlePlay()">播放</button>
  <button class="btn" onclick="handlePause()">暂停</button>
  <button class="btn" onclick="handleFullscreen(document.documentElement)">页面全屏</button>
  <button class="btn" onclick="handleFullscreen(document.getElementById('myVideo'))">dom全屏</button>
  <button class="btn" onclick="exitFullscreen()">退出全屏</button>

</body>
<script>
  // let src = https://slsp.slyb.top/sv/1b584b43-180b0f119a4/1b584b43-180b0f119a4.mp4
  // let poster = https://tiebapic.baidu.com/forum/w%3D580%3B/sign=146beec0d20a304e5222a0f2e1f3a586/38dbb6fd5266d016e05004ecd22bd40734fa35ad.jpg

  const myVideo = document.querySelector('#myVideo');
  console.log(myVideo);

  // myVideo.src = src;
  myVideo.poster = "./assets/images/word.png"

  function handlePlay() {
    myVideo.play(); //播放
  }
  function handlePause() {
    myVideo.pause();  //暂停
  }

  myVideo.addEventListener("loadstart", function(){  //资源加载开始
    console.log('开始加载...')
  })
  myVideo.addEventListener("loadeddata", function(){  //资源加载完成后执行
    console.log('...加载完成')
  })
  myVideo.addEventListener("canplay", function(){  //浏览器判定可以开始播放
    console.log('...可以开始播放')
  })
  myVideo.addEventListener("play", function(){  //开始播放
    console.log('播放中……')
  })
  myVideo.addEventListener("pause", function(){  //暂停
    console.log('暂停了')
  })
  myVideo.addEventListener("ended", function(){  //播放结束
    console.log('播放结束')
  })

  let realTime = 0;
  myVideo.addEventListener("timeupdate", function(){  //播放中，当前播放位置发生改变时触发
    console.log("当前播放时间：", this.currentTime)
    // 每隔一秒执行一次
    let currented = Math.floor(this.currentTime);
    if (currented !== realTime) {
      realTime = currented;
      console.log('----------------- ', currented)
    }

  })
  myVideo.addEventListener("volumechange", function(){  //改变音量大小时触发
    console.log("音量：", this.volume)
  })

  document.documentElement.addEventListener("fullscreenchange", function(e){
    if (document.fullscreenElement) {
      console.log('进入全屏')
    } else {
      console.log('退出全屏')
    }
  })

  let isFullscreen = false;
  // 进入全屏
  function handleFullscreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullScreen()
    }
    isFullscreen = true;
  }
  // 退出全屏
  function exitFullscreen() {
    if (!isFullscreen) return false;

    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    }
    isFullscreen = false;
  }

</script>
</html>